import * as echarts from 'echarts'

import {
	reactive
} from 'vue'

const state = reactive({
	pieChartDom: '',
	pieMyChart: '',
	pieOption: {},

	columnarChartDom: '',
	columnarMyChart: '',
	columnarOption: {},

	lineChartDom: '',
	lineMyChart: '',
	lineOption: {}
})

/**
 * 折线图开始
 */
// 折线图初始化
const lineChart = () => {
	state.lineChartDom = document.querySelector('#line-chart')
	state.lineMyChart = echarts.init(state.lineChartDom)

	state.lineOption = {
		xAxis: {
			type: 'category',
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
		},
		yAxis: {
			type: 'value',
			//data: ['12K', '9K', '6K', '3K', '0']
		},
		series: [{
			data: [820, 932, 901, 934, 1290, 1330, 1320],
			type: 'line',
			smooth: true
		}]
	}
	state.lineOption && state.lineMyChart.setOption(state.lineOption)
}
// 折线图销毁
const destroyLineChart = () => {
	echarts.dispose(state.lineMyChart)
}


/**
 * 柱状图开始
 */
// 柱状图初始化
const columnarChart = () => {
	state.columnarChartDom = document.querySelector('#columnar-chart')
	state.columnarMyChart = echarts.init(state.columnarChartDom)

	state.columnarOption = {
		tooltip: {
			trigger: 'axis',
			axisPointer: { // 坐标轴指示器，坐标轴触发有效
				type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
			}
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		yAxis: [{
			type: 'value'
		}],
		xAxis: [{
			type: 'category',
			axisTick: {
				show: false
			},
			data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
		}],
		series: [{
			barWidth: 10, //柱图宽度
			type: 'bar',
			label: {
				normal: {
					show: true,
					position: 'inside'
				}
			},
			data: [320, 302, 341, 374, 390, {
				value: -10,
				itemStyle: {
					color: '#a90000'
				}
			}]
		}]
	}
	state.columnarOption && state.columnarMyChart.setOption(state.columnarOption)
}
// 柱状图销毁
const destroyColumnarChart = () => {
	echarts.dispose(state.columnarMyChart)
}


/**
 * 饼图开始
 */
// 饼图初始化
const pieChart = () => {
	state.pieChartDom = document.querySelector('#pie-chart')
	state.pieMyChart = echarts.init(state.pieChartDom)

	state.pieOption = {
		width: "50%",
		tooltip: {
			trigger: 'item'
		},
		legend: {
			x: 'left',
			top: '25%',
			left: '45%'
		},
		series: [{
			name: 'Access From',
			type: 'pie',
			radius: ['40%', '70%'],
			avoidLabelOverlap: false,
			label: {
				show: false,
				position: 'center'
			},
			emphasis: {
				label: {
					show: true,
					fontSize: '40',
					fontWeight: 'bold'
				}
			},
			labelLine: {
				show: false
			},
			data: [{
					value: 1048,
					name: 'Search Engine'
				},
				{
					value: 735,
					name: 'Direct'
				},
				{
					value: 580,
					name: 'Email'
				},
				{
					value: 484,
					name: 'Union Ads'
				},
				{
					value: 300,
					name: 'Video Ads'
				}
			]
		}]
	}
	state.pieOption && state.pieMyChart.setOption(state.pieOption)
}
// 饼图销毁
const destroyPieChart = () => {
	echarts.dispose(state.pieMyChart)
}
/**
 * 饼图结束
 */


export {
	pieChart,
	destroyPieChart,
	columnarChart,
	destroyColumnarChart,
	lineChart,
	destroyLineChart
}

